<template>
  <el-dialog
    :visible.sync="dialogVisible"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    title="编辑阈值"
    class="tag-edit-dialog code-alarm-dialog"
    width="25%"
  >
    <el-form ref="editForm" :model="editForm" :rules="editFormRule" label-width="100px" label-position="left">
      <el-form-item label="阈值" prop="" :rules="[{ required: true, message: '请输入阈值', trigger: 'blur' }]">
        <div class="input-number">
          <el-input-number
            v-model.trim="editForm.alarmThreshold"
            :max="100"
            :min="0"
            :precision="2"
            placeholder="请输入阈值"
          >
          </el-input-number>
        </div>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col align="right">
        <el-button @click="beforClose">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import $monitor from './api'
export default {
  data() {
    return {
      dialogVisible: false,
      editForm: {
        tagId: '',
        codeCd: '',
        codeDesc: '',
        alarmThreshold: 0
      },
      editFormRule: {
        alarmThreshold: [{ required: true, message: '阈值不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    showDialog(params) {
      if (params && params.tagId) {
        this.editForm.tagId = params.tagId
        this.editForm.codeCd = params.codeCd
        this.editForm.codeDesc = params.codeDesc
        this.editForm.alarmThreshold = params.alarmThreshold
      } else {
        this.getThresGlobalConfig()
      }
      this.dialogVisible = true
    },
    getThresGlobalConfig() {
      // 获取全局阈值
      $monitor.getThresGlobalConfig().then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm.alarmThreshold = data.data
        } else {
          this.message.error(data.data || data.msg)
        }
      })
    },
    confirm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          const alarmThreshold = this.editForm.alarmThreshold
          if (!this.editForm.tagId) {
            this.updateGlobalThreshold(alarmThreshold)
          } else {
            this.updateThreshold(alarmThreshold)
          }
        }
      })
    },
    updateGlobalThreshold(value) {
      $monitor.updateGlobalThreshold({ alarmThreshold: value }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success('更新成功')
          this.beforClose()
        } else {
          this.message.error(data.data || data.msg)
        }
      })
    },
    updateThreshold(value) {
      // 更新单个阈值
      let obj = {
        tagId: this.editForm.tagId,
        codeCd: this.editForm.codeCd,
        codeDesc: this.editForm.codeDesc,
        alarmThreshold: value
      }
      $monitor.updateThreshold(obj).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success('更新成功')
          this.beforClose()
        } else {
          this.message.error(data.data || data.msg)
        }
      })
    },
    beforClose() {
      this.editForm.tagId = ''
      this.editForm.codeCd = ''
      this.editForm.codeDesc = ''
      this.editForm.alarmThreshold = 0
      this.$refs.editForm.clearValidate()
      this.$emit('callback')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss"></style>
